<template>
	<view class="bg">
		<xl-navbar title="列表标签" fixed shadow></xl-navbar>
		<view class="title">基础样式</view>
		<xl-list-item title="基础样式"></xl-list-item>
		
		<view class="title">去除下边框，点击反馈</view>
		<xl-list-item title="边框/反馈" :border="false" clickable></xl-list-item>
		
		<view class="title">左右图标</view>
		<xl-list-item title="左右图标" icon="xl-tiku" iconSize="20" rightIcon="xl-collect"></xl-list-item>
		
		<view class="title">可用自定义图标</view>
		<xl-list-item title="自定义图标" iconFamily="xl-uni" icon="xl-uni-tabs" rightIconFamily="xl-uni" rightIcon="xl-uni-tabs"></xl-list-item>
		
		<view class="title">左图标可用图片</view>
		<xl-list-item title="左右图标" icon="/static/imgs/logo.png"></xl-list-item>
		
		<view class="title">箭头</view>
		<xl-list-item title="右箭头" arrow></xl-list-item>
		<xl-list-item title="下箭头" arrow arrowDirection="down"></xl-list-item>
		<xl-list-item title="上箭头" arrow arrowDirection="up"></xl-list-item>
		
		<view class="title">折叠面板</view>
		<xl-list-item title="折叠面板" collapse arrow>
			<template #content>
				XingLuoUI 是一款轻量、全面的UniApp框架工具。其中xl-list-item有折叠面板效果，只需要添加collapse属性，
				如果需要箭头显示，则添加arrow属性，如果需要点击反馈，则添加clickable属性
			</template>
		</xl-list-item>
		
		<view class="title">描述、值内容</view>
		<xl-list-item title="描述、值内容" label="描述内容" value="值内容" arrow></xl-list-item>
		
		<view class="title">禁用</view>
		<xl-list-item title="禁用，点击无效" disabled label="描述内容" value="值内容" arrow></xl-list-item>
		
		<view class="title">背景色</view>
		<xl-list-item title="背景色" titleColor="#fff" background="#0a93ff" rightIconColor="#fff" arrow></xl-list-item>
		
		<view class="title">URL跳转</view>
		<xl-list-item title="URL跳转" arrow url="tabs"></xl-list-item>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
</script>

